@import 'base';


:root{
  --primary-light: #8abdff;
  --primary: #6d5dfc;
  --primary-dark: #5b0eeb;
  --white: #FFFFFF;
  --greyLight-1: #E4EBF5;
  --greyLight-2: #c8d0e7;
  --greyDark: #9baacf;
}

.container{
  position: relative;
  width: 30vw;
  height: 30vw;
  border-radius: 50%;
  border:10px solid var(--greyLight-1);
  box-shadow: .8vw .8vw 1vw var(--greyLight-2),inset .6vw .6vw .9vw var(--greyLight-2),-.5vw -.5vw 1vw #fff,inset -.3vw -.3vw 2.7vw #fff;
  background-color: var(--greyLight-1);
  display: flex;
  justify-content: center;
  align-items: center;

  .progress_bar{
    position: relative;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background-color: var(--greyLight-1);
    box-shadow:.8vw .8vw 1vw var(--greyLight-2),-.5vw -.5vw 1vw #fff;
   
    /* &_start{
      position: absolute;
      top: calc((-100% / .8 + 10px) * .1);
      left: 50%;
      transform: translateX(-50%);
      width: calc((100% / .8 - 10px) * .1);
      height: calc((100% / .8 - 10px) * .1);
      border-radius: 50%;
      background-color: cyan;
    } */
    
    &_board{
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: 100%;
      border-radius: 50%;
      z-index: 80;
      background-color: var(--greyLight-1);
      display: flex;
      justify-content: center;
      align-items: center;
      font:5.20833vw 'MedievalSharp', cursive;
      color: cyan;
      text-shadow: .3vw .3vw .4vw var(--greyLight-2),-.3vw -.3vw .4vw #fff;
    }
  }
  .bar{
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    z-index: 6;
    transform: rotate(-90deg);
  }

  .control{
    box-sizing: border-box;
    position: fixed;
    top: 50%;
    right: 20vw;
    width: 12vw;
    height: 8vw;
    padding: 10px;
    border-radius: .5vw;
    background-color: #e4ebf5;
    transform: translateY(-50%);
    box-shadow: .5vw .5vw 1vw var(--greyLight-2),-.3vw -.3vw .5vw #fff;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    input{
      flex: 1;
      padding: 10px 0;
      border-radius: .5vw;
      border:none;
      background-color: transparent;
      text-align: center;
      box-shadow: inset .4vw .4vw .5vw var(--greyLight-2),inset -.2vw -.2vw .5vw #fff;
      transition: .5s ease-in-out;
      font:24px 'MedievalSharp', cursive;
      color: var(--primary-dark);

      &:focus{
        outline: none;
        border: none;
        box-shadow: .4vw .4vw .5vw var(--greyLight-2),-.2vw -.2vw .5vw #fff;
        transition: .5s ease-in-out;
        color: var(--primary);
      }

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0;
      }
    }

    p{
      margin-right: 10px;
      color:#222;
      padding: 5px 10px;
    }
  }
}
